<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <!--引入副本编辑器-->
    <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
    <style>

    </style>
</head>
<!--只修改mian标签内容-->
<!--这里是文章列表页面-->
<!--姓名：           -->
<body>
<div id="app">
    <el-container>
        <el-header>不动</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu @select="handleSelect" active-text-color="orange" default-active="5-1">
                    <img src="imgs/icon.png" style="margin-top: 10px" width="150px">
                    <el-divider></el-divider>
                    <el-menu-item index="1"><i class="el-icon-s-platform">数据统计分析</i></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-custom">管理员账号</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">管理员列表</el-menu-item>
                            <el-menu-item index="2-2">添加管理员</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="3"><i class="el-icon-user-solid"> 用户账号</i></el-menu-item>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-video-camera"> 轮播图管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">轮播图列表</el-menu-item>
                            <el-menu-item index="4-2">添加轮播图</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-promotion"> 文章管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">文章列表</el-menu-item>
                            <el-menu-item index="5-2">发布文章</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-chat-line-round"> 评论管理</i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="6-1">管理员评论</el-menu-item>
                            <el-menu-item index="6-2">用户评论</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="7"><i class="el-icon-setting"> 个人设置</i></el-menu-item>
                </el-menu>
            </el-aside>


            <!--只修改mian标签内容-->
            <el-main>
                <el-row gutter="10">
                    <el-col span="20">
                        <el-card>
                            <div style="margin-top: 15px;">
                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                                        <el-option label="Java" value="1"></el-option>
                                        <el-option label="数据库" value="2"></el-option>
                                        <el-option label="小说" value="3"></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>
                            <template>
                                <el-tabs type="card">
                                    <el-tab-pane label="小说">
                                        <el-button type="primary" @click="location.href='addarticle.html'">发布文章
                                        </el-button>
                                        <el-table :data="contentArr">
                                            <el-table-column type="index" label="编号"></el-table-column>
                                            <el-table-column label="标题" prop="title" width="150px"></el-table-column>
                                            <el-table-column label="摘要" prop="brief" width="300px"></el-table-column>
                                            <el-table-column label="封面" width="60px">
                                                <template slot-scope="scope">
                                                    <img :src="scope.row.imgUrl" width="50px">
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="类型" prop="categoryName"></el-table-column>
                                            <el-table-column label="浏览量" prop="viewCount"></el-table-column>
                                            <el-table-column label="评论量" prop="commentCount"></el-table-column>
                                            <el-table-column label="发布时间" prop="createTime"></el-table-column>
                                            <el-table-column label="操作" width="200px" fixed="right">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="success">编辑</el-button>
                                                    <el-button size="mini" type="danger">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="解说视频">
                                        <el-button type="primary" @click="location.href='addarticle.html'">发布视频
                                        </el-button>
                                        <el-table :data="contentArr">
                                            <el-table-column type="index" label="编号"></el-table-column>
                                            <el-table-column label="标题" prop="title" width="150px"></el-table-column>
                                            <el-table-column label="摘要" prop="brief" width="300px"></el-table-column>
                                            <el-table-column label="封面" width="60px">
                                                <template slot-scope="scope">
                                                    <img :src="scope.row.imgUrl" width="50px">
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="类型" prop="categoryName"></el-table-column>
                                            <el-table-column label="浏览量" prop="viewCount"></el-table-column>
                                            <el-table-column label="评论量" prop="commentCount"></el-table-column>
                                            <el-table-column label="发布时间" prop="createTime"></el-table-column>
                                            <el-table-column label="操作" width="200px" fixed="right">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="success">编辑</el-button>
                                                    <el-button size="mini" type="danger">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="行业资讯">
                                        <el-button type="primary" @click="location.href='addarticle.html'">发布内容
                                        </el-button>
                                        <el-table :data="contentArr">
                                            <el-table-column type="index" label="编号"></el-table-column>
                                            <el-table-column label="标题" prop="title" width="150px"></el-table-column>
                                            <el-table-column label="摘要" prop="brief" width="300px"></el-table-column>
                                            <el-table-column label="封面" width="60px">
                                                <template slot-scope="scope">
                                                    <img :src="scope.row.imgUrl" width="50px">
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="类型" prop="categoryName"></el-table-column>
                                            <el-table-column label="浏览量" prop="viewCount"></el-table-column>
                                            <el-table-column label="评论量" prop="commentCount"></el-table-column>
                                            <el-table-column label="发布时间" prop="createTime"></el-table-column>
                                            <el-table-column label="操作" width="200px" fixed="right">
                                                <template slot-scope="scope">
                                                    <el-button size="mini" type="success">编辑</el-button>
                                                    <el-button size="mini" type="danger">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>

                        </el-card>

                    </el-col>
                </el-row>
                </el-card>
                </el-col>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入富文本编辑器框架js文件-->
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<script>

    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                contentArr: [
                    {
                        "id": 11,
                        "title": "入口即酥的超浓花生酱酥饼a",
                        "brief": "花生酱+花生油=超浓郁花生香 没有糖粉，用了白砂糖 本是入口即酥 却又在酥后留下些许颗粒感 花生浓香",
                        "imgUrl": "imgs/a.jpg",
                        "type": 1,
                        "categoryName": "家常菜",
                        "viewCount": 8,
                        "commentCount": 0,
                        "createTime": "2023/03/27 19:51:45"
                    },
                    {
                        "id": 12,
                        "title": "枣泥花式面包,好吃到爆",
                        "brief": "之前做了枣泥馅，配上花式面包，好吃到爆。 枣泥花式面包的用料 肉松面包面团 见肉松面包配方，枣泥",
                        "imgUrl": "imgs/b.jpg",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:12:42"
                    },
                    {

                        "id": 13,
                        "title": "酥脆培根吐司芝士卷，人见人爱",
                        "brief": "人见人爱的培根平时一般都是放吐司里面做三文治吃今天培根要露脸啦哈哈哈哈简单快手酥脆可口的培根吐司芝士",
                        "imgUrl": "imgs/c.jpg",
                        "type": 1,
                        "categoryName": "家常菜",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:15:43"
                    },
                    {
                        "id": 14,
                        "title": "开放式三明治,一份小清新快手早餐",
                        "brief": " 昨夜下了很怕人的骤雨，清晨办公桌上的薄荷微微抖动它的叶子。一份小清新快手早餐，让生活简洁不简单。 ",
                        "imgUrl": "imgs/d.jpg",
                        "type": 1,
                        "categoryName": "小食",
                        "viewCount": 1,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:16:24"
                    },
                    {
                        "id": 15,
                        "title": "核桃葡萄干软欧：蔓越莓种面",
                        "brief": "干，来款核桃葡萄干软欧吧！核桃是个宝，好处太多，不一一列举啦！ 蔓越莓种面的用料 主面团， 蔓越",
                        "imgUrl": "imgs/a.jpg",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 2,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:16:56"
                    },
                    {
                        "id": 16,
                        "title": "蔓越莓绿豆糕，味道还不错值得一试!",
                        "brief": "全家都很喜欢吃绿豆糕，但楼下甜品店的绿豆糕太甜了，那就自己动手做吧。之前尝试过带皮绿豆，颜色做出来没",
                        "imgUrl": "imgs/b.jpg",
                        "type": 1,
                        "categoryName": "面包",
                        "viewCount": 4,
                        "commentCount": 0,
                        "createTime": "2023/03/28 16:17:35"
                    },
                    {
                        "id": 17,
                        "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
                        "brief": "椰蓉的香味 任谁都抗拒不了吧正好还有半个红心火龙果做成了***嫩的小爱心面包可爱又好吃可以做9个。 ",
                        "imgUrl": "imgs/c.jpg",
                        "type": 1,
                        "categoryName": "小食",
                        "viewCount": 15,
                        "commentCount": 1,
                        "createTime": "2023/03/28 16:18:12"
                    },
                    {
                        "id": 18,
                        "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
                        "brief": "爆浆抹茶甜甜圈面包好吃的起飞的爆浆抹茶甜甜圈，从里到外被抹茶包裹着，自带幸福感的小甜甜，抹茶控们完全",
                        "imgUrl": "imgs/d.jpg",
                        "type": 1,
                        "categoryName": "家常菜",
                        "viewCount": 15,
                        "commentCount": 1,
                        "createTime": "2023/03/28 16:20:26"
                    }
                ],
                input3: '',
                select: '',
                currentDate: new Date(),
                dialogImageUrl: '',
                dialogVisible: false,
                input: '',
                b: {title: "", type: "2", fenlei: ""},
                d: {title: "", type: "1", price: ""},
            }
        },

        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSelect(key, keyPath) {
                v.currentIndex = key;
                console.log(key);
            }
        }
    })

</script>
</html>
